<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5; /* Light Gray */
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .top-bar {
            background-color: #FFD700; /* Gold color for the top bar */
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .top-bar a {
            color: #333; /* Dark gray text color */
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .return {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-repeat: no-repeat;
            background-image: url("./images/return.png");
            margin-right: 5px;
        }

        .title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            color: #e25822; /* Tangerine color */
        }

        .section-list {
            list-style: none;
            padding: 0;
        }

        .section-item {
            background-color: #FFF; /* White color for section background */
            border: 2px solid #C71585; /* Deep pink color for border */
            border-radius: 10px;
            margin-bottom: 20px;
            padding: 10px;
        }

        .section-item li {
            margin: 10px 0;
            font-size: 18px;
            color: #C71585; /* Deep pink color for text */
        }

        .bottom-nav {
            background-color: #333;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .bottom-nav a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 0;
            font-size: 17px;
            flex: 1;
        }

        .bottom-nav i {
            margin-right: 4px;
        }

        .bottom-nav a:hover {
            background-color: #4caf50; /* Green */
            color: white;
        }

        .bottom-nav a.active {
            background-color: #4caf50; /* Green */
            color: white;
        }
    </style>
</head>
<body onload="displayFavorites()">
<div class="top-bar">
    <a href="javascript:history.back()">
        <i class="return"></i> retorno
    </a>
</div>
<div class="container">
    <div class="title">Meus favoritos</div>
    <ul class="section-list">
        <!-- Display only the favorite questions -->
        <li class="section-item" id="favorite-section">
            <ul id="favorite-list" class="section-list"></ul>
        </li>
    </ul>
</div>
<script>
    // JavaScript functions remain unchanged
</script>

<script>

 // JavaScript 函数，用于切换按钮的活动状态
        function setActive(element) {
            // 移除所有按钮的活动状态
            var buttons = document.querySelectorAll('.button');
            buttons.forEach(function (button) {
                button.classList.remove('active');
            });

            // 添加当前点击按钮的活动状态
            element.classList.add('active');
        }

        // JavaScript 函数，用于切换底部导航按钮的活动状态
        function setActiveNav(element) {
            // 移除所有导航按钮的活动状态
            var navButtons = document.querySelectorAll('.bottom-nav a');
            navButtons.forEach(function (navButton) {
                navButton.classList.remove('active');
            });

            // 添加当前点击导航按钮的活动状态
            element.classList.add('active');
        }
    // Function to display favorite questions
    function displayFavorites() {
        // Get the favorite section and list
        var favoriteSection = document.getElementById("favorite-section");
        var favoriteList = document.getElementById("favorite-list");

        // Get the questions from local storage
        var storedQuestions = localStorage.getItem('questions');
        var questions = storedQuestions ? JSON.parse(storedQuestions) : [];

        // Filter out only the favorite questions
        var favoriteQuestions = questions.filter(function (question) {
            return question.favorite;
        });

        // Display favorite section only if there are favorite questions
        favoriteSection.style.display = favoriteQuestions.length > 0 ? "block" : "none";

        // Display favorite questions in the list
        favoriteList.innerHTML = "";
        favoriteQuestions.forEach(function (question) {
            var favoriteItem = document.createElement("li");
            favoriteItem.innerText = question.question;
            favoriteList.appendChild(favoriteItem);
        });
    }
</script>